<template>
  <div class="edit">
    <el-row class="row">
      <el-col class="c1">
        <el-form v-loding="loading">
          <el-form-item label="店铺名称">
            <el-input v-model="form.name" maxlength="255" show-word-limit clearable />
          </el-form-item>
          <el-form-item label="店铺简介">
            <el-input type="textarea" :rows="5" resize="none" v-model="form.describe" maxlength="255" show-word-limit clearable />
          </el-form-item>
          <el-form-item v-if="form.createdAt" label="创建于">
            <span>{{ form.createdAt | date }}</span>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col class="c2">
        <upload class="cover" cropper :aspectRatio="1" v-model="form.cover" />
      </el-col>
    </el-row>
    <el-row class="center">
      <el-button v-to="{ name: 'myshop-exhibit' }">取 消</el-button>
      <el-button v-if="form.id" type="warning" @click="init"> 恢 复 </el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue'
import { myShop, shopmModify } from '@/api/shop'

export default {
  components: { upload },
  data() {
    return {
      form: {
        name: '',
        cover: '',
        describe: '',
        createdAt: 0,
      },
      loading: false
    }
  },
  methods: {
    async save() {
      this.loading = true
      const data = await shopmModify(this.form)
      this.loading = false
      if (data.code !== 200) return this.$message.error('保存失败,错误码:' + data.code)
      this.$message.success('保存成功')
      this.$router.replace({ name: 'myshop-exhibit' })
    },
    async init() {
      const data = await myShop()
      if (data.code !== 200) return
      this.form = data.data
    },
  },
  created() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  .c1 {
    flex: 1;
  }
  .c2 {
    margin-left: 16px;
    width: 300px;
  }
}
.cover {
  width: 300px;
  height: 300px;
}
</style>
